<template>
  <div>
    <!-- 动态组件 -->
    <!-- <component :is="组件"/>   is的值是那个组件 在Vue模板编译的时候就会转化成为对应的组件-->
 
    <!-- 缓存组件 -->
    <!-- <keep-alive></keep-alive>  返回被keey-alive 包括的组件不会被销毁， 会缓存起来方便下一次使用 -->

    <!-- <keep-alive :include="正则|数组|都好隔开"><keep-alive>  include 包含可以被缓存的组件-->
    <!-- <keep-alive :exclude="正则|数组|都好隔开"><keep-alive>  exclude 包含不被缓存的组件-->

    <!-- 特殊的生命周期 -->
    <!-- activated    被 keep-alive 缓存的组件激活时调用。-->
    <!-- deactivated  被 keep-alive 缓存的组件停用时调用。。-->

    <keep-alive :include="/List/">
      <component :is="navBar[activeIndex].is"/>
    </keep-alive>

    <footer>
      <b v-for="(v, i) in navBar" :key="i"
        :class="activeIndex === i?'active':''"
        @click="activeIndex=i"
      >{{ v.name }}</b>
    </footer>
  </div>
</template>


<script>
import List from './components/List.vue'
import My from './components/My.vue'
import Banner from './components/Banner.vue'
import Car from './components/Car.vue'
import Index from './components/Index.vue'
export default {
  data() {
    return {
      flag: true,
      activeIndex: 1,
      navBar: [
        {
          is: List,
          name: '列表'
        }, {
          is: My,
          name: '我的'
        }, {
          is: Banner,
          name: '轮播'
        }, {
          is: Car,
          name: '购物车'
        }, {
          is: Index,
          name: '首页'
        },
      ]
    }
  }
}
</script>

<style scoped>
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 46px;
}

footer b.active {
  color: red
}
</style>